/**
 * @file common.mobile.css
 * @description 通用移动端样式 - 不包含HeroBanner样式（已独立）
 * @copyright 版权所有 (c) 2025 UIED技术团队
 * @website https://fsuied.com
 * @license MIT
 * @version 1.0.0
 */

/* 通用移动端样式文件 - 供AI、UIUX、Search等页面使用 */
/* 使用媒体查询在750px以下应用移动端样式 */

@media (max-width: 750px) {
  /* 移动端全局容器 */
  .page-container {
    font-size: 14px;
    line-height: 1.4;
    margin-top: -56px; /* 移动端导航栏高度调整 */
    padding-top: 56px;
  }

  /* ===== 移动端主布局 - 统一1rem间距 ===== */
  .page-container .main-layout {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem; /* 统一所有方向1rem间距 */
    margin-top: 1rem; /* 统一顶部间距 */
    min-height: calc(100vh - 320px);
    width: 100%;
    box-sizing: border-box;
  }

  /* ===== 移动端导航交互优化 ===== */
  /* CategorySidebar在移动端的样式调整 */
  .page-container .category-sidebar {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    background: var(--white);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
  }

  /* 移动端侧边栏标题 */
  .page-container .sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-light);
  }

  /* 移动端导航菜单 */
  .page-container .nav-menu {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-container .nav-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px; /* 触摸友好的最小高度 */
  }

  .page-container .nav-item:hover,
  .page-container .nav-item.active {
    background: var(--primary-light);
    color: var(--primary-color);
  }

  /* ===== 移动端工具主区域 ===== */
  .page-container .tools-main {
    flex: 1;
    min-width: 0;
  }

  .page-container .tools-main .tools-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color); /* 与PC端一致 */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .page-container .tools-main .tools-header h2 {
    font-size: 1.375rem; /* 保持层次感 */
    font-weight: 700; /* 与PC端一致 */
    color: var(--text-primary);
    margin: 0;
  }

  .page-container .tools-main .tools-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
  }

  /* ===== 移动端工具网格 ===== */
  .page-container .tools-grid {
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 1rem; /* 统一1rem间距 */
    width: 100%;
  }

  /* ===== 移动端工具卡片 ===== */
  .page-container .tool-item-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 120px; /* 触摸友好的最小高度 */
  }

  .page-container .tool-item-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(51, 115, 220, 0.1);
    transform: translateY(-1px);
  }

  .page-container .tool-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  /* 移动端工具图标 */
  .page-container .tool-item-icon,
  .page-container .tool-item-icon img {
    width: 2rem; /* 移动端适中大小 */
    height: 2rem;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
  }

  .page-container .tool-item-icon-fallback {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  .page-container .tool-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .page-container .tool-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .page-container .tool-item-name {
    font-size: 1rem; /* 移动端适中大小 */
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-container .tool-item-name:hover {
    color: var(--primary-color);
  }

  .page-container .tool-item-description {
    font-size: 0.875rem; /* 移动端稍小 */
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 移动端显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ===== 移动端工具标签和元信息 ===== */
  .page-container .tool-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
  }

  .page-container .tool-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-light);
  }

  .page-container .tool-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
  }

  .page-container .tool-item-tags .tool-tag {
    background: var(--background-light);
    color: var(--text-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
  }

  .page-container .tool-item-tags .tool-tag:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  /* ===== 移动端加载更多 ===== */
  .page-container .load-more-section {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
  }

  .page-container .load-more-section button {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px; /* 触摸友好 */
  }

  .page-container .load-more-section button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
  }
}

/* ===== 小屏幕设备优化 (iPhone SE等) ===== */
@media (max-width: 375px) {
  .page-container .main-layout {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .page-container .tool-item-card {
    padding: 0.75rem;
    min-height: 100px;
  }

  .page-container .tool-item-name {
    font-size: 0.9rem;
  }

  .page-container .tool-item-description {
    font-size: 0.8rem;
  }

  .page-container .tools-grid {
    gap: 0.75rem;
  }
}

/* ===== 横屏优化 ===== */
@media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) {
  .page-container .main-layout {
    padding: 0.5rem;
    margin-top: 0.5rem;
  }
}

/* ===== 深色模式适配 - 修复变量 ===== */

/* ===== 触摸设备优化 ===== */
@media (max-width: 750px) {
  /* 确保所有可点击元素都有足够的触摸目标 */
  .page-container * {
    -webkit-tap-highlight-color: transparent;
  }

  .page-container .tool-item-card,
  .page-container .nav-item,
  .page-container button,
  .page-container input,
  .page-container select,
  .page-container textarea,
  .page-container a {
    min-height: 44px; /* iOS推荐的最小触摸目标 */
  }

  .page-container .tool-item-name,
  .page-container .nav-item,
  .page-container button {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 移动端滚动优化 */
  .page-container {
    -webkit-overflow-scrolling: touch;
  }

  .page-container .nav-menu {
    -webkit-overflow-scrolling: touch;
  }
} 